<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-06-15 16:20:30
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:22:48
-->
<template>
  <div class="app-container">
    <div class="left">
      <div class="left-title">
        <div>
          <img src="@/assets/images/icon-role.png" alt="" />
          <span>角色权限管理</span>
        </div>
        <div
          style="
            padding-right: 10px;
            vertical-align: middle;
            margin-top: 2px;
            color: #1267fa;
          "
        >
          <i class="el-icon-circle-plus"></i>
          <span
            style="margin-left: 3px"
            @click="addRole"
            v-hasPermi="['system:role:add']"
          >
            创建角色
          </span>
        </div>
      </div>
      <div
        class="personnel"
        v-for="(item, index) in personnelList"
        :key="index"
        @click="person(item)"
        :class="active === item.roleId ? 'active' : ''"
      >
        <div>{{ item.roleName }}</div>
        <div class="set" v-if="item.isDefault == 1 ? false : true">
          <el-dropdown style="margin-left: 10px">
            <el-button class="el-icon-more"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="editDept(item)"
                v-hasPermi="['system:role:editName']"
              >
                编辑
              </el-dropdown-item>
              <el-dropdown-item
                @click.native="delDept(item)"
                v-hasPermi="['system:role:remove']"
              >
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-title">
        <div
          class="tab-title"
          v-for="(item, index) in tabList"
          :key="index"
          :class="item.id === active1 ? 'active1' : ''"
          @click="changeTab(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="content">
        <role-employees
          v-if="active1 === 0"
          :roleId="roleId"
          :isDefault="isDefault"
        ></role-employees>
        <menu-permissions
          v-else-if="active1 === 1"
          :roleId="roleId"
        ></menu-permissions>
        <scope-authority v-else :roleId="roleId"></scope-authority>
      </div>
    </div>
    <el-dialog
      title="新增角色"
      :visible.sync="dialogRoleShow"
      width="30%"
      @close="roleClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <el-form
        :model="roleForm"
        ref="roleForm"
        :rules="roleRules"
        label-position="top"
        v-if="dialogRoleShow"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleForm.roleName" style="width: 330px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogRoleShow = false">取消</el-button>
        <el-button type="primary" @click="newRoles">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改角色名称"
      :visible.sync="dialogRoleEditShow"
      width="30%"
      @close="roleClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <el-form
        :model="roleForm"
        ref="roleForm"
        :rules="roleRules"
        label-position="top"
        v-if="dialogRoleEditShow"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleForm.roleName" style="width: 330px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogRoleEditShow = false">取消</el-button>
        <el-button type="primary" @click="editRoles">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleLists, addRole, romoveRole, editName } from "@/api/sys";
import MenuPermissions from "./conponments/menuPermissions.vue";
import roleEmployees from "./conponments/roleEmployees.vue";
import ScopeAuthority from "./conponments/scopeAuthority.vue";
export default {
  components: { roleEmployees, MenuPermissions, ScopeAuthority },
  data() {
    return {
      activeName: "first",
      active: 0,
      active1: 0,
      dialogRoleShow: false,
      dialogRoleEditShow: false,
      roleId: Number,
      roleForm: {
        roleName: "",
      },
      roleRules: {
        roleName: [
          { required: true, message: "请输入角色名称！", trigger: "blur" },
        ],
      },
      tabList: [],
      isDefault: 1,
      personnelList: [],
      isDefault: "",
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    editRoles() {
      this.$refs.roleForm.validate((valid) => {
        if (!valid) return;
        editName({
          roleName: this.roleForm.roleName,
          roleId: this.roleId,
        }).then((res) => {
          this.$message.success(res.msg);
          this.dialogRoleEditShow = false;
          this.getRoleList();
        });
      });
    },
    // 编辑角色
    editDept(item) {
      this.roleId = item.roleId;
      this.dialogRoleEditShow = true;
    },
    // 删除角色
    delDept(item) {
      romoveRole({
        roleId: item.roleId,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getRoleList();
      });
    },
    // 关闭新建角色
    roleClose() {
      this.roleForm.roleName = "";
    },
    // 新建角色
    newRoles() {
      this.$refs.roleForm.validate((valid) => {
        if (!valid) return;
        addRole(this.roleForm).then((res) => {
          this.$message.success(res.msg);
          this.dialogRoleShow = false;
          this.getRoleList();
        });
      });
    },
    // 获取角色权限列表
    getRoleList() {
      getRoleLists().then((res) => {
        this.personnelList = res.rows;
        this.active = res.rows[0].roleId;
        this.roleId = res.rows[0].roleId;
        this.isDefault = res.rows[0].isDefault;
        if (res.rows[0].isDefault == 1) {
          this.tabList = [
            {
              id: 0,
              label: "角色员工",
            },
          ];
        } else {
          this.tabList = [
            {
              id: 0,
              label: "角色员工",
            },
            {
              id: 1,
              label: "菜单权限",
              jurisdiction: "system:role:edit",
            },
            {
              id: 2,
              label: "权限范围",
              jurisdiction: "system:role:dataScope",
            },
          ];
        }
      });
    },
    person(item) {
      if (item.isDefault == 1) {
        this.tabList = [
          {
            id: 0,
            label: "角色员工",
          },
        ];
      } else {
        this.tabList = [
          {
            id: 0,
            label: "角色员工",
          },
          {
            id: 1,
            label: "菜单权限",
            jurisdiction: "system:role:edit",
          },
          {
            id: 2,
            label: "权限范围",
            jurisdiction: "system:role:dataScope",
          },
        ];
      }
      this.active = item.roleId;
      this.roleId = item.roleId;
      this.isDefault = item.isDefault;
      this.active1 = 0;
    },
    addRole() {
      this.dialogRoleShow = true;
    },
    changeTab(item) {
      this.active1 = item.id;
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  display: flex;
  height: 93vh;
  width: 100%;
  padding-left: 0;
  .left {
    width: 20%;
    height: 100%;
    overflow: auto;
    border-right: 2px solid #ececec;
    align-items: center;
    .left-title {
      box-sizing: border-box;
      align-items: center;
      height: 74px;
      border-bottom: 1px solid #ececec;
      display: flex;
      justify-content: space-between;
      img {
        vertical-align: middle;
        margin-right: 12px;
      }
    }
  }
}
.personnel {
  display: flex;
  justify-content: space-between;
  width: 313px;
  height: 48px;
  padding-left: 25px;
  margin-top: 17px;
  line-height: 48px;
  box-sizing: border-box;
  font-size: 14px;
}
.personnel:hover .set {
  display: block;
}
.set {
  display: none;
}
.personnel:last-child {
  margin-bottom: 20px;
}
.active {
  background-color: #fafafa;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1267fa;
  position: relative;
}
.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 48px;
  background: #1267fa;
}
.right {
  width: 80%;
  padding-left: 24px;
  .right-title {
    height: 74px;
    border-bottom: 1px solid #ececec;
    display: flex;
    line-height: 74px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2b2b2b;
    .tab-title {
      margin-left: 44px;
      cursor: pointer;
    }
  }
}
.el-form {
  margin-left: 72px;
}
.active1 {
  border-bottom: 2px solid #1267fa;
  color: #1267fa;
}
</style>